<template>
    <div class="label_switch_container">
        <div class="label_switch_content" :style="{ fontSize }">
            <!-- Left label -->
            <label id="label_left" @click="clickLeft" :class="{ select: selectStyle('left') }">
                <span :style="setStyle('left')">{{ leftText }}</span>
            </label>

            <!-- Center label -->
            <label id="label_center" v-if="showCenter" @click="clickCenter" :class="{ select: selectStyle('center') }">
                <span :style="setStyle('center')">{{ centerText }}</span>
            </label>

            <!-- Right label -->
            <label id="label_right" @click="clickRight" :class="{ select: selectStyle('right') }">
                <span :style="setStyle('right')">{{ rightText }}</span>
            </label>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonSwitch',
    props: {
        // Left label text
        leftText: {
            type: String,
            default: '2.4 GHz'
        },
        // center label text
        centerText: {
            type: String,
            default: ''
        },
        // right label text
        rightText: {
            type: String,
            default: '5 GHz'
        },
        // Selected label
        labelBoolean: {
            type: [Boolean, String],
            require: true
        },
        // Whether to display the center
        showCenter: {
            type: Boolean,
            require: false
        }
    },
    data() {
        return {
            labelVal: '',
            styleObj: {
                left: 'flex-end',
                center: 'flex-center',
                right: 'flex-start'
            }
        };
    },
    methods: {
        // Click on callback on the left side
        clickLeft() {
            this.$emit('clickLeft');
        },

        // Click on callback on the center side
        clickCenter() {
            this.$emit('clickCenter');
        },

        // Click on callback on the right side
        clickRight() {
            this.$emit('clickRight');
        },

        // Set corresponding justify content based on location
        setStyle(agm) {
            return { justifyContent: this.labelVal == agm ? 'center' : this.styleObj[agm] };
        },

        //Set whether to select based on labelVal
        selectStyle(agm) {
            return this.labelVal == agm;
        }
    },
    computed: {
        // Set the text size based on whether the center is displayed to avoid text wrapping when turned on
        fontSize() {
            return this.showCenter ? '14px' : '15px';
        }
    },
    watch: {
        // Dynamically determine the value of label and assign it to labelVal
        labelBoolean: {
            handler(nval) {
                if (typeof nval === 'string') this.labelVal = nval;
                else this.labelVal = nval ? 'left' : 'right';
            },
            immediate: true
        }

        // When opening the center, change the text of the center and right
        // showCenter: {
        //     handler(nval) {
        //         if (nval) {
        //             this.centerText = '5 GHZ';
        //             this.rightText = '6 GHZ';
        //         }
        //     },
        //     immediate: true
        // }
    }
};
</script>

<style lang="less" scoped>
.label_switch_container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .label_switch_content {
        margin-bottom: 15px;
        width: 325px;
        height: 50px;
        background-color: #eee;
        border-radius: 25px;
        display: flex;
        font-weight: bold;
        overflow: hidden;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;

        #label_left,
        #label_center,
        #label_right {
            color: #7c7c7c;
            width: 50%;
            height: 100%;
            border-radius: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                display: flex;
                width: 58%;
            }
        }

        .select {
            width: calc(50% + 25px);
            padding-right: 0;
            color: white !important;
            background-color: @blueColor;
            transition: background-color 0.5s ease;
        }
    }
}
</style>
